<%- include("header",{type:''}) %>
	<div class="container">
		<ul class="posts spost">
			<li>
				<div class="author">
					<span title="<%= posts.name %>"><a href="/posts?author=<%= posts.name %> ">author: <%= posts.name %></a></span>
					<span>評論數：<%= posts.comments %></span>
					<span>瀏覽量：<%= posts.pv %></span>
				</div>
				<div class="comment_pv">
					<span><%= posts.moment %></span>
				</div>
				<a href="/posts/<%= posts.id %>">
					<div class="title">
						<img class="userAvator" src="../images/<%= posts.avator %>" alt="avator">
						<%- posts.title %>
					</div>
					<div class="content markdown">
						<%- posts.content %>
					</div>
				</a>
				<div class="edit">
					<% if(session && session.user ===  posts.name  ){ %>
					<p><a href="<%= posts['id'] %>/edit">編輯</a></p>
					<p><a class="delete_post">刪除</a></p>
					<% } %>
				</div>
			</li>
		</ul>
	</div>
	<div class="comment_wrap">

		<% if(session.user){ %>
		<form class="form" method="post" action="/<%= posts.id %>">
			<textarea id="spContent" name="content" cols="82"></textarea>
			<div class="submit">發表留言</div>
		</form>
		<% } else{ %>
			<p class="tips">登錄之後才可以評論嘿</p>
		<% } %>
		<% if (commentPageLength > 0) { %>
		<div class="comment_list markdown">
			<% pageOne.forEach(function(res){ %>
				<div class="cmt_lists">
					<div class="cmt_content">
						<div class="userMsg">
							<img src="../images/<%= res['avator'] %>" alt="avator"><span><%= res['name'] %></span>
						</div>
						<div class="cmt_detail">
							<%- res['content'] %>
						</div>
						<span class="cmt_time"><%= res['moment'] %></span>
						<span class="cmt_name">
							<% if(session && session.user ===  res['name']){ %>
								<a class="delete_comment" href="javascript:delete_comment(<%= res['id'] %>);"> 刪除</a>
							<% } %>
						</span>
					</div>
				</div>
			<% }) %>
		</div>	
		<% } else{ %>
			<p class="tips">還沒有評論，還不快去評論！</p>
		<% } %>
		<div style="margin-top: 30px" class="pagination" id="page"></div>	
	</div>
	<script src="/pagination.js"></script>
	<script>
		var userName = "<%- session.user %>"
		pagination({
			selector: '#page',
			totalPage: <%= commentPageLength %>,
			currentPage: 1,
			prev: '上一頁',
			next: '下一頁',
			first: true,
			last: true,
			showTotalPage:true,
			count: 2//當前頁前顯示的數量
		},function(val){
			// 當前頁
			var _comment = ''
			$.ajax({
				url: "<%= posts.id %>/commentPage",
				type: 'POST',
				data:{
					page: val
				},
				cache: false,
				success: function (msg) {
					//console.log(msg)
					_comment = ''
					if (msg != 'error') {
						$('.comment_list').html(' ')
						$.each(msg,function(i,val){
							//console.log(val.content)
							_comment += '<div class=\"cmt_lists\"><div class=\"cmt_content\"><div class=\"userMsg\"><img src = \"../images/'+ val.avator +'\" alt=\"avator\"><span>'+ val.name +'</span></div ><div class="cmt_detail">'+ val.content + '</div><span class=\"cmt_time\">'+ val.moment +'</span><span class=\"cmt_name\">';
								if (val.name == userName) {
									_comment += '<a class=\"delete_comment\" href=\"javascript:delete_comment('+ val.id +');\"> 刪除</a>'
								}
							_comment += '</span></div></div>'
						})
						$('.comment_list').append(_comment)
					}else{
						alert('分頁不存在')
					} 
				}
			})
		
		})
		
		// 刪除文章
		$('.delete_post').click(function() {
			$.ajax({
				url: "<%= posts.id %>/remove",
				type: 'POST',
				cache: false,
				success: function (msg) {
					if (msg.code == 200) {
						fade('刪除文章成功')
						setTimeout(function() {
							window.location.href = "/posts"
						}, 1000)
					} else {
						fade('刪除文章失敗')
					}
				}
			})
		})
		// 評論
		var isAllow = true
		$('.submit').click(function(){
			if (!isAllow) return
			isAllow = false
			if ($('textarea').val().trim() == '') {
				fade('請輸入評論！')
				isAllow = true
			}else{
				$.ajax({
					url: '/' + location.pathname.split('/')[2],
					data:$('.form').serialize(),
					type: "POST",
					cache: false,
					dataType: 'json',
					success: function (msg) {
						if (msg.code == 200) {
							fade('發表留言成功')							
							setTimeout(()=>{
								isAllow = true
								window.location.reload()
							},1500)  	
						}
					},
					error: function () {
						alert('異常');
					}
				})
			}
		})
		// 冊除評論
		function delete_comment(id) {
			$.ajax({
				url: "<%= posts.id %>/comment/" + id + "/remove",
				type: 'POST',
				cache: false,
				success: function (msg) {
					if (msg.code == 200) {
						fade('刪除留言成功')
						setTimeout(function() {
							location.reload()
						}, 1000)
					} else {
						fade('刪除留言失敗');
					} 
				},
				error: function () {
					alert('異常')
				}
			})
		}
	</script>
<% include footer %>
